import React, { useEffect, useRef, useState } from'react';
import './Recommend.css';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { useNavigate } from 'react-router-dom';
// import Tabss from './Tabss'

function Tab1(): JSX.Element {
  const tabRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (tabRef.current && contentRef.current) {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop >= 550) {
          setIsSticky(true);
        } else {
          setIsSticky(false);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '为你推荐',
      children:<img src={require('../../../images/chang.png')} alt="" className='imagess'/> ,
    },
    {
      key: '2',
      label: '大暑',
      children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: '奥运会',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '4',
      label: '暑期营销',
      children: 'Content of Tab Pane 4',
    },
    {
      key: '5',
      label: '喜报',
      children: 'Content of Tab Pane 5',
    },
    {
      key: '6',
      label: '手机海报',
      children: 'Content of Tab Pane 6',
    },
    {
      key: '7',
      label: '早安',
      children: 'Content of Tab Pane 7',
    },

    {
      key: '8',
      label: '商品主图',
      children: 'Content of Tab Pane 8',
    },
    {
      key: '9',
      label: '公众号首图',
      children: 'Content of Tab Pane 9',
    },
    {
      key: '10',
      label: '小红书',
      children: 'Content of Tab Pane 10',
    },
    {
      key: '11',
      label: '七月你好',
      children: 'Content of Tab Pane 11',
    },
    {
      key: '12',
      label: '邀请函',
      children: 'Content of Tab Pane 12',
    },

    
  ];
  let Navigate=useNavigate()
const goshe=()=>{
  Navigate('/sheji')
}
  return (
    <div className="m1">
      <div ref={contentRef} className="Seach-box">
        <div className="inp-top1">
          <span className="img-left">
            <img
              src={require("../../../images/fangdajing.png")}
              alt=""
              className="fangdajing1"
            />
          </span>
          <input
            type="text"
            placeholder="2个以及以上关键词描述你"
            className="inp"
          />
          <button>搜索</button>

          <span className="icon">
            <img
              src={require("../../../images/xiangji.png")}
              alt=""
              className="xiangji1"
            />
          </span>
        </div>
        <div className="xiangyao">
          你可能想找：<div>大暑</div>
          <div>PPT</div>
          <div>小红书</div>
          <div>邀请函</div>
          <div>Ai文案</div>
        </div>
      </div>
      <div  className='tab'>
        <div>精选模版</div>
        <div>大暑</div>
        <div>巴黎奥运</div>
        <div>暑假教育</div>
        <div>海报</div>
        <div>公众号</div>
        <div>喜报</div>
        <div>PPT</div>
      </div>
      <h2>设计工具</h2>
      <div className="tabbr">
        <div className="wai">
          <button className="sheji" onClick={goshe}>
            <p>+</p>
            开始设计
          </button>
        </div>
        <div className="tab-box">
          <img src={require("../../../images/c1.png")} alt="" />
          <img src={require("../../../images/c2.png")} alt="" />
          <img src={require("../../../images/c4.png")} alt="" />
          <img src={require("../../../images/c3.png")} alt="" />
        </div>
      </div>
      <div ref={tabRef} className={`tabs ${isSticky? 'ticky' : ''}`}>
        <Tabs defaultActiveKey="1" items={items} onChange={() => {}} />
      </div>
    </div>
  );
}

export default Tab1;